Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Develop updated getting started page #2059

Merged

Conversation

aalieu
Copy link
Member

@aalieu aalieu commented Aug 4, 2021

Fixes #1619

What changes did you make and why did you make them ?

  • Revamped the 'Getting Started' page according to the designs on Figma to the best of my ability. Could not get everything pixel perfect due to differences in font-styles and font-weight differences between our default styles and Figma styles.
  • Added 11 images to be used as icons in the 'Getting-Started' page
  • Added 10 .yml credit files to credit the images/icons added. Did not credit 1 icon because a hackforla designer created it (and she said no need for citation).

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

Before Desktop View

Before Mobile View

Visuals after changes are applied

Desktop View

Mobile View

@github-actions github-actions bot added P-Feature: Getting Started https://www.hackforla.org/getting-started role: front end Tasks for front end developers Complexity: Large Status: Updated No blockers and update is ready for review labels Aug 4, 2021
@github-actions
Copy link

github-actions bot commented Aug 4, 2021

From your project repository, check out a new branch and test the changes.

git checkout -b aalieu-develop-updated-getting-started-page gh-pages
git pull https://github.com/aalieu/website.git develop-updated-getting-started-page

@Sihemgourou Sihemgourou modified the milestone: 4. Onboarding flow Aug 4, 2021
@Aveline-art Aveline-art self-requested a review August 4, 2021 19:55
@Sihemgourou Sihemgourou marked this pull request as draft August 8, 2021 17:20
…ttribution. also changed accordion arrows to one uniform pink color for both desktop and mobile views
@macho-catt macho-catt marked this pull request as ready for review August 18, 2021 02:20
@macho-catt macho-catt requested review from abenipa3 and arghmatey and removed request for Aveline-art August 18, 2021 02:21
Copy link
Contributor

@arghmatey arghmatey left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work so far! I've requested a few changes.

I also found the header svgs get a little stretched out when testing for tablet. This may have to do with their set height, and could be fixed with a media query.

Edit: Ugh. I didn't save my comments before submitting... Adding those changes now.

Copy link
Member

@abenipa3 abenipa3 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me so far. Please see below for my comments:

  • I agree with Sarah. I got the same result for the header svgs when I tested the tablet. With that, replacing the height with max-width and max-height in .step-img-intro may resolve the issue.

  • The icon in Step 2 looks faded/orange (both on desktop and mobile) compared to what we have in the Figma file. Is this what we want our icon to look?
    image
    image

@abuna1985
Copy link
Member

abuna1985 commented Aug 22, 2021

@aalieu Replace the Step 2 image (.png) so it matches the Figma file. @arghmatey will create separate styling issues for the page (created #2193)

As soon as the image is replaced, we will be able to merge this pull request.

Thank you.

@aalieu
Copy link
Member Author

aalieu commented Aug 25, 2021

@arghmatey @alyssabenipayo

Thank you so much for your reviews!

@abuna1985

Hey Adam, sorry but I will be out of town until the 29th so I won't be able to update my PR until right before the Tuesday meeting on the 31st.

There's a slight problem though with replacing the step 2 image — I got the icon straight from the links provided in Figma so I'm not sure why it looks faded and orange. I'm not sure what can be done about it since it's an icon from another source. This is the link for the icon where it is faded and orange compared to Figma:

https://www.freepik.com/free-vector/solidarity-concept-illustration_14562369.htm#page=5&position=24

@abuna1985
Copy link
Member

abuna1985 commented Aug 25, 2021

@aalieu There seems to be a miscommunication. You can download images directly from the Figma design. You will have to rename the file, but you will get the png with the proper color.
https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=13%3A0

Click here to see the visual steps to download images from Figma design

Step 1: Select the image from the figma design. Then select the `Export` tab (highlighted in red)


Step 2: Select the `Export` button (highlighted in red) which will download the selected image in a zip folder

@aalieu
Copy link
Member Author

aalieu commented Aug 25, 2021

@abuna1985

Awesome, thanks for the clarification! Thanks for the step-by-step instruction too. I had no idea that you could export images from Figma so I definitely learned something new and useful today.

@aalieu
Copy link
Member Author

aalieu commented Aug 31, 2021

Changed the step 2 image to the correct version. Also resolved the changes requested by @alyssabenipayo and @arghmatey. Should be ready to merge @abuna1985!

Copy link
Member

@abenipa3 abenipa3 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good.

@abuna1985 abuna1985 merged commit 6612e3c into hackforla:gh-pages Sep 4, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Complexity: Large P-Feature: Getting Started https://www.hackforla.org/getting-started role: front end Tasks for front end developers Status: Updated No blockers and update is ready for review UAT: has visuals
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Develop Updated Getting Started page
6 participants